<div class="{{#if hide}}odk-hidden{{/if}}">
    {{> labelHint}}
    <div id="viz"></div>
    <div class="input-container">{{! used to prevent swiping on sliders}}
        <input
            class="odk"
            name="{{name}}"
            value="{{value}}"
            {{#eachProperty htmlAttributes}}
                {{property}}="{{value}}"
            {{/eachProperty}}
            {{#if disabled}}
                style="background-color:lightgray;"
                disabled="true"
            {{/if}}
            />
            {{#if invalid}}
                <p>invalid</p>
            {{/if}}
    </div>
    <a class="startTimer" data-rel="popup" data-role="button" data-inline="true">
        Start breath counter
    </a>
</div>
<div data-role="popup" id="popupDialog" data-overlay-theme="d" data-theme="c" style="max-width:500px;" class="ui-corner-all">
	<div data-role="content" data-theme="d" style="padding:15px;" class="ui-corner-bottom">
        <div id="time">60 seconds remaining.</div>
        <div id="breaths">0 breaths</div>
		<a data-role="button" class="incrementCounter">
            Press this button on each breath.
        </a>
	</div>
</div>
<script type="text/javascript">
    _.defer(function() {
        var timerActive = false;
        var counter;
        
        $('.incrementCounter').click(function() {
            if(timerActive){
                counter++;
                $("#breaths").text(counter + " breaths");
            }
        });
        
        $('.startTimer').click(function() {
            $('#popupDialog').popup('open');
            var seconds = 60;
            counter = 0;
            timerActive = true;
            var setIntervalId = setInterval(function() {
                seconds = seconds - 1;
                $("#time").text(seconds + " seconds remaining.");
                if(seconds <= 0){
                    clearInterval(setIntervalId);
                    timerActive = false;
                    $('input').val(counter);
                }
            }, 1000);
            $( "#popupDialog" ).bind({
                popupafterclose: function(event, ui) {
                    clearInterval(setIntervalId);
                }
            });
        });
    });
</script>
